<script setup lang="ts">
import { ref } from 'vue'
import VTable from '@/components/table/src/index.vue'
import type { TableOptions } from './components/table/src/types'

interface TableData {
  date: string;
  name: string;
  address: string;
}

defineOptions({
  name: 'TableView'
})

const tableData = ref<TableData[]>([])
const editRowIndex = ref<string>('edit')
setTimeout(() => {
  tableData.value = [
    {
      date: '2016-05-03',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      date: '2016-05-02',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      date: '2016-05-04',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      date: '2016-05-01',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
  ]
}, 400)

const options: TableOptions[] = [
  {
    label: '日期',
    prop: 'date',
    align: 'center',
    slot: 'date',
    // editable: true,
  },
  {
    label: '姓名',
    prop: 'name',
    align: 'center',
    slot: 'name',
  },
  {
    label: '地址',
    prop: 'address',
    align: 'center',
    // editable: true,
  },
  {
    label: '操作',
    align: 'center',
    action: true,
  }
]

const handleEdit = (scope: any) => {

}
const comfirm = (scope: any) => {}
const cancel = () => {}
</script>

<template>
  <VTable
    :data="tableData"
    :options="options"
    is-edit-row
    :edit-row-index="editRowIndex"
    @comfirm="comfirm"
    @cancel="cancel"
  >
    <template #date="{scope}">
      <!-- <el-icon-timer /> -->
      {{ scope.row.date }}
    </template>

    <template #name="{scope}">
      <el-popover effect="light" trigger="hover" placement="top" width="auto">
        <template #default>
          <div>name: {{ scope.row.name }}</div>
          <div>address: {{ scope.row.address }}</div>
        </template>
        <template #reference>
          <el-tag>{{ scope.row.name }}</el-tag>
        </template>
      </el-popover>
    </template>

    <template #action="{scope}">
      <el-button type="primary" @click="handleEdit(scope)">编辑</el-button>
      <el-button type="danger">删除</el-button>
    </template>

    <template #editCell="{scope}">
      <div style="display: flex; align-items: center;">
        <el-button link type="primary" @click="comfirm(scope)">确认</el-button>
        <el-button link>取消</el-button>
      </div>
    </template>
  </VTable>
</template>

<style scoped>
svg {
  width: 1em;
  height: 1em;
}
</style>
